<template>
  <div class="form-item-box">
    <div v-if="mode === 'DESIGN'">
      <el-select class="max-fill" v-if="!expanding" multiple v-model="_value" disabled :placeholder="placeholder" />
      <el-checkbox-group v-else v-model="_value">
        <el-checkbox disabled v-for="(op, index) in options" :key="index" :label="op">{{ op }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div v-else class="form-item-el">
      <div style="width: 100%">
        <el-select
          class="max-fill"
          v-if="!expanding"
          v-model="_value"
          multiple
          :clearable="$attrs.clearable"
          :placeholder="placeholder"
        >
          <el-option v-for="(op, index) in options" :key="index" :value="op" :label="op"></el-option>
        </el-select>
        <el-checkbox-group v-else v-model="_value">
          <el-checkbox style="margin: 5px" v-for="(op, index) in options" :key="index" :label="op">{{ op }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="buttons">
        <el-button type="primary" v-show="isShowImageText" link @click="handelImageText">图文案例</el-button>
        <div class="line" v-show="isShowImageText && isShowCompare"></div>
        <el-button type="primary" v-show="isShowCompare" link @click="handelContrast">优劣势分析</el-button>
      </div>
    </div>
  </div>

  <w-dialog
    clickClose
    width="1200px"
    fullscreen
    :click-close="false"
    closeFree
    :showFooter="false"
    :border="false"
    :title="formItem.title"
    v-model="viewVisible"
  >
    <div style="height: 500px; overflow-y: auto">
      <ImageTextPreview :data="imageTextList" v-if="isImageText" />
      <ComparePreview :global-compare="globalCompare" :option-compare="optionCompare" is-options v-else />
    </div>
  </w-dialog>
</template>

<script setup>
import { computed, ref } from "vue";
import ImageTextPreview from "@/views/system/designForm/components/ImageTextPreview.vue";
import ComparePreview from "@/views/system/designForm/components/ComparePreview.vue";

const props = defineProps({
  optionsConfig: {
    type: Object,
    default: () => ({})
  },
  formItem: {
    type: Object,
    default: () => {
      return {};
    }
  },
  placeholder: {
    type: String,
    default: "请选择选项"
  },
  modelValue: {
    type: Array,
    default: () => []
  },
  options: {
    type: Array,
    default: () => []
  },
  mode: {
    type: String,
    default: "DESIGN"
  },
  expanding: Boolean,
  required: Boolean,
  readonly: Boolean
});

const emit = defineEmits(["update:modelValue"]);

const _value = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

const isShowImageText = computed(() => {
  const globalSimple = props.optionsConfig?.globalSimple;
  const optionSimple = props.optionsConfig?.optionSimple ?? [];
  const isGlobalSimple = globalSimple && (globalSimple.desc || globalSimple.pic?.length || globalSimple?.video?.length);
  const isOption = optionSimple.some(item => {
    return item.desc || item.pic?.length || item.video?.length;
  });
  return isOption || isGlobalSimple;
});
const isShowCompare = computed(() => {
  const globalCompare = props.optionsConfig?.globalCompare ?? [];
  const optionCompare = props.optionsConfig?.optionCompare ?? [];
  return globalCompare.length || optionCompare.length;
});

const viewVisible = ref(false);
const isImageText = ref(false);
const imageTextList = ref([]);
const handelImageText = () => {
  const globalSimple = props.optionsConfig?.globalSimple;
  const optionSimple = props.optionsConfig?.optionSimple;
  const imageTextItemObj = props.optionsConfig?.imageTextList[0];
  imageTextList.value = [{ ...imageTextItemObj, ...globalSimple }, ...optionSimple] ?? [];
  viewVisible.value = true;
  isImageText.value = true;
};

/**
 * 优劣势分析
 */
const globalCompare = ref([]);
const optionCompare = ref([]);
const handelContrast = () => {
  globalCompare.value = props.optionsConfig?.globalCompare ?? [];
  optionCompare.value = props.optionsConfig?.optionCompare ?? [];
  viewVisible.value = true;
  isImageText.value = false;
};
</script>

<style scoped lang="scss">
@use "@/assets/styles/mixin";
.form-item-el {
  @include mixin.flex-center(space-between);
  :deep(.el-select__wrapper),
  :deep(.el-checkbox-group) {
    margin-left: 10px;
    box-shadow: none;
    background-color: #f2f3f5;
  }
  :deep(.el-checkbox-group) {
    background-color: transparent;
    .el-checkbox + .el-checkbox {
      display: inline-block;
      margin-left: 50px !important;
    }
  }
  .buttons {
    @include mixin.flex-align;
    margin-left: 50px;
    .line {
      width: 2px;
      height: 16px;
      margin: 0 10px;
      background-color: #dcdfe6;
      border-radius: 2px;
    }
  }
}
.form-item-box {
  width: 100%;
}
</style>
